<template>
  <div class="login-container">
    <el-form ref="loginFrom" label-position="right" label-width="80px" class="login-container__form" lg="6"
             :model="user" :rules="rules">
      <h3 class="login-container__header">系统登录</h3>
      <el-form-item prop="email" label="电子邮件">
        <el-input type="text" placeholder="电子邮件" v-model="user.email"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" placeholder="密码" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:40%;float:left" @click.native.prevent="loginSubmitBtn('loginFrom')">
          登录
        </el-button>
        <el-button type="info" style="width:40%;margin-left:5%" @click.native.prevent="registerBtn">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {mapActions, mapMutations} from 'vuex';
  import {loginPost} from '../../services/';
  import remoteValidatorMixin from '../../components/mixin/RemoteValidatorMixin.js';
  export default {
    name: 'loginForm',
    mixins: [remoteValidatorMixin],
    data () {
      return {
        dataItem: 'user',
        user: {
          email: 'jing.min@163.com',
          password: '123456',
          // captcha: '',
          remember: true
        }
      };
    },
    methods: {
      ...mapMutations([
        'FETCH_USER_SUCCESS'
      ]),
      ...mapActions([
        'saveToken'
      ]),
      loginSubmitBtn (formName) {
        let self = this;
        this.remoteValidate(this, formName, loginPost).then(function (data) {
          if (data) {
            self.saveToken({token: data.token, remember: self.user.remember});
            self.FETCH_USER_SUCCESS(data.user);
            self.$router.push('/');
          }
        }, function (data) {

        });
      },
      registerBtn () {
        this.$router.push('/register');
      }
    }
  };
</script>

